<template>
  <PageContainer>
    <view class="container">
      <Header title="缴费管理">
        <UniSearchBar
          placeholder="请输入会员名称/手机号码"
          cancelButton="none"
          radius="32"
          bgColor="#F7F8FA"
          @confirm="searchFnc"
          @clear="restFnc"
        ></UniSearchBar>
        <view style="background-color: #fff">
          <RadioTagGroup
            v-model="(parame.paymentStatus as number)"
            :data="radioTagGroupData"
            @change="radioTagGroupChange"
          />
        </view>
      </Header>
      <view>
        <Paglist v-model="data" :parame="parame" @register="register" :scroll-top-bottom="200">
          <template v-for="v in data" :key="v.id">
            <DataItem :item="v" @click="handleClick" />
          </template>
        </Paglist>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* paymentManagement 缴费管理 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import { provide, reactive, ref } from 'vue';
  import RadioTagGroup, { type TagItem } from '../components/RadioTagGroup.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { sysMemberPageList } from '@/api/admin';
  import { PaymentStatusEnum } from '@/enums/membershipEnum';
  import type { SysMemberPageListData, SysMemberPageListResult } from '@/api/admin/types';
  import DataItem from './components/DataItem.vue';
  import { navigateTo } from '@/router';
  import { onPageScroll } from '@dcloudio/uni-app';

  function searchFnc(e: { value: string }) {
    parame.keyword = e.value;
    refresh();
  }
  function restFnc() {
    parame.keyword = '';
    refresh();
  }

  const radioTagGroupData = ref<TagItem[]>([
    { value: null, label: '全部' },
    { value: PaymentStatusEnum.DUE, label: '临期' },
    { value: PaymentStatusEnum.NOTPAYCOST, label: '待缴费' },
    { value: PaymentStatusEnum.ARREARAGE, label: '欠费' },
  ]);
  function radioTagGroupChange() {
    refresh();
  }

  const data = ref<SysMemberPageListResult[]>([]);
  const parame = reactive<SysMemberPageListData>({
    paymentStatus: null,
    keyword: '',
  });

  provide('api', sysMemberPageList);
  const [register, { refresh }] = useConList();

  function handleClick(item: SysMemberPageListResult) {
    const { id, memberName, levelName, levelId, applyType } = item;
    navigateTo({
      name: 'memberRenewSet',
      options: {
        id,
        memberName,
        levelName,
        levelId,
        applyType,
        callback: () => refresh(),
      },
    });
  }

  onPageScroll(() => {});
</script>

<style lang="scss" scoped></style>
